
import { WeElement, define } from 'omi'

import './index.css'

define('page-coupon', class extends WeElement {
  config = {
    navigationBarTitleText: '优惠券'
  }

  data = {
    user_head:"",
    mask:"",
    code:"",
    is_show:"",
    logo:"",
    index:0
  }

  install() {
    this.data.mask = require('../../../images/mask_bg.png'),
    this.data.user_head = require('../../../images/wd_user_head.png'),
    this.data.code = require('../../../images/my_code.png'),
      this.data.logo = require('../../../images/logo.png'),
    this.data.is_show=false,
    this.update()
  }
  show_code=()=>{
    this.data.is_show = true,
    this.update()
  }
  hide_code = () => {
    this.data.is_show = false,
    this.update()
  }
  set_index=(e)=>{
    this.data.index = e.target.dataset.index;
    this.update()
  }
  render() {
    // const {is_show}=this.data;
    // console.log({ is_show });
    return (
      <view class="container">
        <view class="top">
          <view class={index == 0 ? "mid_card active" :"mid_card"} bindtap={set_index} data-index="0">未使用</view>
          <view class={index == 1 ? "mid_card active" : "mid_card"} bindtap={set_index} data-index="1">已使用</view>
          <view class={index == 2 ? "mid_card active" : "mid_card"} bindtap={set_index} data-index="2">已失效</view>
        </view>
        {is_show &&
          <view class="mask" bindtap={this.hide_code}>
          <view class="code_content">
            <image class="mask_bg" src={mask}></image>
            <image class="user_head" src={user_head}></image>
            <view class="name">优惠卷名称</view>
            <view class="now_use">立即使用</view>
            <image class="code" src={code}></image>
          </view>
        </view>
        }
        
        { index==0?
          <view class="mid">
            <view class="cards" bindtap={this.show_code}>
              <image class="card_pic" src={user_head}></image>
              <view class="card_type">
                <view class="time">2019/00/00-2019/00/00</view>
                优惠卷类型名称00
              </view>
              <view class="card_discount">9折</view>
            </view>
            <view class="cards" bindtap={this.show_code}>
              <image class="card_pic" src={user_head}></image>
              <view class="card_type">
                <view class="time">2019/00/00-2019/00/00</view>
                优惠卷类型名称00
              </view>
              <view class="card_discount">9折</view>
            </view>
            
          </view>
            :""
        }
        {index == 1 ?
          <view class="mid">
            <view class="cards" bindtap={this.show_code}>
              <image class="card_pic" src={user_head}></image>
              <view class="card_type">
                <view class="time">2019/00/00-2019/00/00</view>
                优惠卷类型名称11
              </view>
              <view class="card_discount">8.5折</view>
            </view>
          </view>
            :""
        }
          {index == 2 ?
          <view class="mid">
            <view class="cards" bindtap={this.show_code}>
              <image class="card_pic" src={user_head}></image>
              <view class="card_type">
                <view class="time">2019/00/00-2019/00/00</view>
                优惠卷类型名称22
              </view>
              <view class="card_discount">9折</view>
            </view> 
            <view class="cards" bindtap={this.show_code}>
              <image class="card_pic" src={user_head}></image>
              <view class="card_type">
                <view class="time">2019/00/00-2019/00/00</view>
                优惠卷类型名称22
              </view>
              <view class="card_discount">9折</view>
            </view> 
          </view> 
            : ""
          }
        
        <image class="logo" src={logo}></image>
      </view>
    )
  }
})